import React, { useEffect } from 'react';

import { Button, Card, Col, Empty, Input, Row, Spin } from 'antd';
import { debounce, size } from 'lodash';
import { router, withRouter } from 'umi';

import { GuideByServerFlag, PageHeaderWrapper } from '@/components';
import { defaultFormatResult, useRequest } from '@/hooks';
import { getPrivilegeTemplate } from '@/pages/Setting/Privilege/services';
import authHelper from '@/utils/auth/helper';

import TableList from './components/TableList';

const { checkCode } = authHelper;
const { Search } = Input;

// 权限管理-模板管理
const List = ({ location }) => {
    const { query = {} } = location;

    const { data, run, loading } = useRequest(params => getPrivilegeTemplate(params), {
        manual: true,
        ...defaultFormatResult
    });

    useEffect(() => {
        run(query);
    }, [query, run]);

    // 替换url
    const handleReplacePage = param => {
        history.replace({ query: { ...query, ...param } });
    };

    const handleSearch = debounce(value => {
        handleReplacePage({ keyword: value });
    }, 150);

    return (
        <PageHeaderWrapper>
            <GuideByServerFlag serverStorageKey="guideTemplateManagement">
                <Card
                    title={
                        <GuideByServerFlag.Step
                            placement="rightTop"
                            title="【模板管理】板块"
                            content="管理权限模板，便于各岗位及功能的授权"
                        >
                            <span>模板管理</span>
                        </GuideByServerFlag.Step>
                    }
                >
                    <Row type="flex" justify="space-between">
                        <Col span={18}>
                            <Search
                                defaultValue={query?.keyword}
                                style={{ width: 240 }}
                                allowClear
                                placeholder="搜索模板名称"
                                onSearch={value => handleSearch(value)}
                            />
                        </Col>
                        <Col span={6} style={{ textAlign: 'right' }}>
                            {checkCode('system:authorization:role:new') && (
                                <Button
                                    type="primary"
                                    icon="plus"
                                    style={{ marginTop: 3 }}
                                    onClick={() => {
                                        history.push({
                                            pathname: '/setting/privilege/newtemplate',
                                            query: {}
                                        });
                                    }}
                                >
                                    新增模板
                                </Button>
                            )}
                        </Col>
                    </Row>

                    <Spin spinning={loading}>
                        {size(data) > 0 ? (
                            <TableList data={data} wrapStyles={{ marginTop: 20 }} query={query} fetchList={run} />
                        ) : (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                        )}
                    </Spin>
                </Card>
            </GuideByServerFlag>
        </PageHeaderWrapper>
    );
};

export default withRouter(List);
